<template>
    <view
        class="item-info"
        :class="showBillInfo === 0 ? 'none' : showBillInfo === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">单据详情</view>
                <view class="close" @click="closeBillInfo">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <view class="item">
                <view class="item-img">
                    <image
                        :src="itemData.gdimg ? itemData.gdimg : goodsImg"
                        mode="scaleToFill"
                    ></image>
                </view>
                <view class="item-r">
                    <view class="i-r-a">{{ itemData.gdname }}</view>
                    <view class="i-r-b"
                        >{{ itemData.brand_txt }} {{ itemData.cattitle }}
                        {{ itemData.item_no }}</view
                    >
                    <view class="i-r-c" v-if="costSee"
                        >成本 : {{ itemData.cost_bw }}</view
                    >
                    <view class="i-r-d">
                        <view class="i-r-d-a"
                            ><text>{{ itemData.price }} </text>
                        </view>
                        <view class="i-r-d-b">X{{ itemData.number }}</view>
                    </view>
                </view>
            </view>
            <view class="cate-list comm-list">
                <view v-for="(item, index) in itemSpecls" :key="index">
                    <view class="itemSpecls">
                        <view class="itemSpecls-gg"
                            >{{ item.spec_title }}
                            <text class="xfq" v-if="item.money_q > 0">
                                {{ item.money_q }}消费券</text
                            ></view
                        >
                        <view class="itemSpecls-num"
                            >{{ item.number }}/{{ item.unit_title }}</view
                        >
                    </view>

                    <view
                        v-if="is_return && itemData.is_return_gd == 1"
                        class="return-num"
                    >
                        <el-form
                            ref="nextstepForm"
                            :model="nextstepForm[index]"
                            label-width="60px"
                            :rules="rules"
                            :hide-required-asterisk="true"
                        >
                            <el-form-item label="数量">
                                <el-input-number
                                    v-model="nextstepForm[index].shuliang"
                                    :min="1"
                                    :max="
                                        parseInt(item.number - item.rt_number)
                                    "
                                ></el-input-number>
                            </el-form-item>
                            <el-form-item label="价格">
                                <el-input
                                    v-model="nextstepForm[index].jiage"
                                    class="w-180"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </view>
                    <view class="txt" v-else
                        >备注: {{ item.txt ? item.txt : "暂无" }}</view
                    >
                </view>

                <view class="to-return">
                    <view class="but"
                        ><el-button
                            type="primary"
                            round
                            @click="toReturnFun"
                            v-if="!is_return && itemData.is_return_gd == 1"
                            >去退货</el-button
                        ><el-button
                            type="primary"
                            round
                            @click="nextStepFun"
                            v-if="is_return && itemData.is_return_gd == 1"
                            >下一步</el-button
                        ></view
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import accessCtrl from "../../js/limit/AccessCtrl.js";
import https from "../../js/https/Https.js";

export default {
    props: ["md", "itemSpecls", "itemData", "nextstepForm"],
    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
            showBillInfo: 0,
            costSee: true,
            is_return: false,

            rules: {
                jiage: [
                    { required: true, message: "请输入价格", trigger: "blur" },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入价格",
                        trigger: "blur",
                    },
                ],
            },
        };
    },

    async mounted() {
        this.costSee = await accessCtrl.getGdsCostSeeLimit();
    },

    methods: {
        limitFun() {
            if (this.nextstepForm.jiage > this.itemSpecls[0].amount) {
                this.nextstepForm.jiage = this.itemSpecls[0].amount;
            }
        },
        toReturnFun() {
            this.is_return = true;
        },
        nextStepFun() {
            const arr = this.nextstepForm;
            const _this = this;
            const data = {
                formula: "",
            };
            arr.map((v, i) => {
                data.formula += `(${v.jiage}*${v.shuliang})${
                    i + 1 == arr.length ? "" : "+"
                }`;
            });

            https.commonCount(data, back, true);
            function back(res) {
                _this.$emit("iseditTeturnFun", res);
            }
        },
        //显示分类面板
        toggleBillsStateMask(type) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.showBillInfo = 2;
            setTimeout(() => {
                this.showBillInfo = state;
            }, timer);
        },

        closeBillInfo() {
            this.$emit("clickClose");
            this.is_return = false;
        },
    },
};
</script>
<style lang="scss">
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 60%;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        .item-fixed-top {
            padding: 10px 0 10px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            font-size: 18px;
            .close {
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.item {
    margin: 10px 0;
    background: #fff;
    display: flex;
    padding: 10px 20px 10px 10px;
    border-bottom: 1px solid #ececec;
    cursor: pointer;
    .item-img {
        width: 95px;
        height: 95px;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .item-r {
        flex: 1;
        padding-left: 10px;
        view {
            font-size: 15px;
            line-height: 20px;
            color: #999;
        }
        .i-r-a {
            color: #000;
            font-size: 20px;
            line-height: 30px;
        }
        .i-r-d {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .i-r-d-a {
                color: red;
                font-size: 8px;
                display: flex;
                align-items: center;
                text {
                    font-size: 20px;
                    line-height: 26px;
                }
            }
        }
    }
}
.cate-list {
    max-height: 500px;
    .itemSpecls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 6px 20px;
        .xfq {
            font-size: 14px;
            color: #5c9fff;
            padding-top: 3px;
            margin-left: 10px;
        }
    }
    .txt {
        padding: 6px 20px;
        background: #fff;
        border-bottom: 1px solid #ececec;
    }
    .return-num {
        background: #fff;

        padding: 20px 0;
        .w-180 {
            width: 180px;
        }
    }
    .to-return {
        padding: 10px 0;
        .but {
            display: flex;
            justify-content: center;
            ::v-deep.el-button {
                width: 200px;
            }
        }
    }
}
</style>